<template>
	<view>
		<!-- 搜索组件-->
		<view class="hs">
			<my-search @click.native="gotoSearch"></my-search>
		</view>
		<!-- 轮番图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,index) in swiperlist" :key="index">
				<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
					<img :src="item.image_src" />
				</navigator>
			</swiper-item>
		</swiper>

		<!-- 分类图 -->
		<!-- <view class="fenlei">
			<view class="f1" v-for="(item,index) in navList" :key="index" @click="dianji(item)">
				<img :src='item.image_src' />
			</view>
		</view> -->

		<!-- 楼层区域 -->
		<!-- 时尚女装 -->
		<view class="louceng">
			<view>
				<img src="/static/home_img/6.png" class="zhuti" />
			</view>

			<view class="zimg" @click="gotogoodsList(0)">
				<!-- 左边 -->
				<view class="limg">
					<img src="/static/home_img/1.png" style="width: 233rpx;" mode="widthFix" />
				</view>
				<!-- 右边 -->
				<view class="rimg">
					<view>
						<img src="/static/home_img/2.png" mode="widthFix" style="width: 233rpx;" />
					</view>
					<view>
						<img src="/static/home_img/3.png" mode="widthFix" style="width: 233rpx;" />
					</view>
					<view>
						<img src="/static/home_img/4.png" mode="widthFix" style="width: 233rpx;" />
					</view>
					<view>
						<img src="/static/home_img/5.png" mode="widthFix" style="width: 233rpx;" />
					</view>
				</view>
			</view>
		</view>

		<!-- 户外运动-->
		<view class="louceng" @click="gotogoodsList(1)">
			<view>
				<img src="/static/home_img/12.png" class="zhuti" />
			</view>

			<view class="zimg">
				<!-- 左边 -->
				<view class="limg">
					<img src="/static/home_img/7.png" style="width: 233rpx;" mode="widthFix" />
				</view>
				<!-- 右边 -->
				<view class="rimg">
					<view>
						<img src="/static/home_img/8.png" mode="widthFix" style="width: 273rpx;" />
					</view>
					<view>
						<img src="/static/home_img/9.png" mode="widthFix" style="width: 193rpx;" />
					</view>
					<view>
						<img src="/static/home_img/10.png" mode="widthFix" style="width: 193rpx;" />
					</view>
					<view>
						<img src="/static/home_img/11.png" mode="widthFix" style="width: 273rpx;" />
					</view>
				</view>
			</view>
		</view>

		<!-- 箱包配饰-->
		<view class="louceng" @click="gotogoodsList(2)">
			<view>
				<img src="/static/home_img/18.png" class="zhuti" />
			</view>

			<view class="zimg">
				<!-- 左边 -->
				<view class="limg">
					<img src="/static/home_img/13.png" style="width: 233rpx;" mode="widthFix" />
				</view>
				<!-- 右边 -->
				<view class="rimg">
					<view>
						<img src="/static/home_img/14.png" mode="widthFix" style="width: 273rpx;" />
					</view>
					<view>
						<img src="/static/home_img/15.png" mode="widthFix" style="width: 193rpx;" />
					</view>
					<view>
						<img src="/static/home_img/16.png" mode="widthFix" style="width: 193rpx;" />
					</view>
					<view>
						<img src="/static/home_img/17.png" mode="widthFix" style="width: 273rpx;" />
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	// 导入自己封装的 mixin 模块
	import badgeMix from '@/mixins/tabbar-badge.js'

	export default {
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMix],
		data() {
			return {
				swiperlist: [],
				navList: [],
				floorList: [],
				goods: {
					girl: [],
					sports: [],
					gift: []
				}

			}
		},
		onShow() {
			this.getswiperlist()
		},
		methods: {
			// 请求轮番图的数据
			async getswiperlist() {
				const res = await uni.$http.get('/getHomeBanners')
				console.log('轮番的数据', res);
				this.swiperlist = res.data
				// uni.$showMsg('数据请求成功！')
			},
			gotoSearch() {
				uni.navigateTo({
					url: '/subpkg/search/search',
				})
			},
			gotogoodsList(type) {
				uni.reLaunch({
					url: '/pages/cate/cate?zindex=' + type
				})
			}
		}
	}
</script>

<style lang="scss">
	swiper {
		height: 330rpx;

		.swiper-item,
		img {
			width: 100%;
			height: 100%;
		}
	}

	.fenlei {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;

		.f1 {
			width: 128rpx;
			height: 140rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.louceng {
		.zhuti {
			height: 60rpx;
			width: 100%;
			display: flex;
			margin-top: 50rpx;
		}

		.zimg {
			display: flex;
			padding-left: 10rpx;

			.rimg {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;

			}
		}
	}

	.hs {
		position: sticky;
		top: 0;
		z-index: 999;
	}
</style>